<!-- 新建cai菜单 -->
<template>
  <div class="created_menu">
    <el-form class="item" label-width="100px" label-position="left">
      <el-form-item label="父级菜单">
        <el-input v-model="defaultInfo.menu_name" placeholder="顶级菜单此处为 0"></el-input>
      </el-form-item>
    </el-form>
    <base-form  :key="componentKey" :form-config="modalFormConfig" v-model="formaDataModel">
      <template #footer>
        <el-button type="primary" plain size="small" @click="handleCreateMenuCb">确定创建</el-button>
      </template>
    </base-form>
  </div>
</template>
<script setup lang='ts' >
import { ref, computed, watchEffect } from 'vue'
import { separateType } from "@/utils/menu-map"
import { getIconsSVGName } from "@/utils/menu-map"


import { useStore } from "@/store"

const store = useStore()
const props = defineProps({
  modalFormConfig: {
    type: Object,
    required: true
  },
  defaultInfo: {
    type: Object,
    required: true
  }
})
const entireMenus =  store.state.entireMenus
const emit = defineEmits(['createdMenuCb'])
let defaultInfo = computed(() => {
  // 如果点击的是 按钮 就找到他的父级菜单信息
  if(props.defaultInfo.menu_type==2){
     // 递归找到父级菜单信息
       function recursive(entireMenus:any[],parent_pid:Number):any{
          for (const menu of entireMenus) {
              if (menu.menu_type == 0) {
                const findMenu = recursive( menu.children ?? [], parent_pid)
                if (findMenu) {
                  return findMenu
                }
              } else if (menu.id  == parent_pid) {
                return menu
              }
            }
       }
   return recursive(entireMenus,props.defaultInfo.parent_pid)
  }
 return props.defaultInfo
})


let menu_type = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'menu_type')
let icons = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'icon')
let component = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'component')
let is_cache = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'is_cache')
let path = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'path')
let perms = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'perms')
let remark = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'remark')




const formaDataModelOrigin: any = {}
let formItems = props.modalFormConfig?.formItems ?? []
for (const formItem of formItems) {

   if(formItem.defaultValue ||formItem.defaultValue ===0){
    formaDataModelOrigin[formItem.field] = formItem.defaultValue
   }else{
     formaDataModelOrigin[formItem.field] = ''
   }


}
// 动态填充 options的数据
icons.options = getIconsSVGName()
menu_type.otherOptions.disabled = false
let formaDataModel = ref(formaDataModelOrigin)
// 关键点强制重现渲染组件
let componentKey = ref('1')

/**
 * 有点冗余 暂时没有比较好的实现方式，由于菜单比较复杂分为三类
 * 每一类都需要动态的显示和隐藏一些东西 想要全部封装在一起比较复杂
 */

watchEffect(()=>{
  perms.prepend = `system:${defaultInfo.value.component}:`
 const selectType = formaDataModel.value.menu_type
  componentKey.value = selectType
  //1.如果是创建按鈕 去除 组件名称、路径、是否缓存、 图标
 if(selectType == 2){
    component.isHidden =true
    path.isHidden =true
    is_cache.isHidden =true
    icons.isHidden =true
    remark.isHidden = true
    perms.isHidden = false
 }
 //2.如果是创建二级级菜单 去除 图标、权限标识
 if(selectType == 1){
    perms.isHidden =true
    icons.isHidden =true
    remark.isHidden = true

     component.isHidden =false
    path.isHidden =false
    is_cache.isHidden =false
 }
//3.如果是创建一级级菜单 去除 路径、权限标识、是否缓存、组件
 if(selectType == 0){
   component.isHidden =true
    path.isHidden =true
    is_cache.isHidden =true
    perms.isHidden =true
   icons.isHidden =false
   remark.isHidden =false
 }

})


const handleCreateMenuCb = () => {
  const parent_pid = defaultInfo.value.id ? defaultInfo.value.id : 0

  let newValue = { ...formaDataModel.value, ['parent_pid']: parent_pid,['perms']:perms.prepend+formaDataModel.value.perms }
  newValue = separateType(newValue)
  emit('createdMenuCb', newValue)
}

</script>
<style lang='less' scoped>
.item {
  padding: 0 20px;
}

.superior {
  // margin-left: 40px;
  color: #606266;
}
</style>
